/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Dimensions,
    Platform,
    Image,
    ScrollView,
    TouchableOpacity,
    ActivityIndicator
} from 'react-native';

var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;
let AutoResponsive = require('autoresponsive-react-native');
import RuralAPIService from "../Commom/RuralAPIService";
import CountryHomePage from './CountryHomePage';
import TownWebView from "../Components/TownWebView";
import RecommendedStar from '../Components/RecommendedStar';
export default class TownPage extends Component {
    constructor(props) {
        super(props);
        this. state = {
            array: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 0, 1],
            ruralData: [
                {name: '斗门镇', image: require('../../Image/new/bg_01.png')},
                {name: '金台寺', image: require('../../Image/new/bg_02.png')},
                {name: '莲花村', image: require('../../Image/new/bg_03.png')},
                {name: '会同村', image: require('../../Image/new/bg_04.png')},
                {name: '斗门镇', image: require('../../Image/new/bg_01.png')},
                {name: '金台寺', image: require('../../Image/new/bg_02.png')},
                {name: '莲花村', image: require('../../Image/new/bg_03.png')},
                {name: '会同村', image: require('../../Image/new/bg_04.png')},
                {name: '斗门镇', image: require('../../Image/new/bg_01.png')},
                {name: '金台寺', image: require('../../Image/new/bg_02.png')},
                {name: '莲花村', image: require('../../Image/new/bg_03.png')},
                {name: '会同村', image: require('../../Image/new/bg_04.png')}],
            town: '',
            label:['烧排骨','第一石门','陈家庄'],
            flag: false,
        }

    }


    componentDidMount() {
        RuralAPIService.TownDetails(this.props.ID).then((ret)=> {
            this.setState({
                town:ret,
                flag: true,
            })
        }).catch((err)=> {
        });
    }

    goTown(id){
        this.props.navigator.replace({
            id: 'TownPage',
            component: TownPage,
            passProps: {
                ID:id
            }
        });

    }
    goCountryHomePage(id) {
        //乡村主页
        this.props.navigator.push({
            id: 'CountryHomePage',
            component: CountryHomePage,
            passProps: {
                ID: id
            },
        });
    }
    getAutoResponsiveProps() {
        return {
            itemMargin: 10,
        };
    }

    renderChildren(find_rural) {
        return find_rural.map((item, index) => {
            var h=0;
            if((index+1)%4===1||(index+1)%4===0){
                h=180;
            }else if((index+1)%4===2||(index+1)%4===3){
                h=230;
            }
            return (
                <TouchableOpacity style={{width:(width-30)/2,height:h,marginLeft:10}} key={index}activeOpacity={0.5}
                                  onPress={()=>this.goCountryHomePage(item.id)}>
                    <View style={{width:(width-30)/2,height:h}} key={index}>
                          <Image style={{width:(width-30)/2,height:h,resizeMode:'cover',borderRadius:4}}
                                 source={{uri:item.image}}/>
                        <View style={{position: 'absolute',left:0,bottom:0,width:(width-30)/2,height:25,justifyContent:'center',borderBottomLeftRadius:4,borderBottomRightRadius:4,backgroundColor:this.indexColor(index)}}>
                            <Text style={{color:'white',marginLeft:10}}>{item.title}</Text>
                        </View>
                    </View>
                </TouchableOpacity>
            );
        }, this);
    }

    BackAction() {
        this.props.navigator.pop();
    }

    indexColor(index){
        var indexColor='rgba(146,178,217,0.9)';
        if(index===0){
            indexColor='rgba(146,178,217,0.9)';
        }else if(index===1){
            indexColor='rgba(156,149,102,0.9)';
        }else if(index===2){
            indexColor='rgba(234,186,154,0.9)';
        }
        return indexColor;
    }
    labelIcon(index){
        if(index===0){
            return require('../../Image/new/icon_eat.png');
        }else  if(index===1){
            return require('../../Image/new/icon_tourism.png');
        }else if(index===2){
            return require('../../Image/new/icon_live.png');
        }
    }
    render() {
        var town_list='';
        var find_rural='';
        var label='';
        if(this.state.town!=null&&this.state.town!=''){
            town_list=this.state.town.town_list;
            find_rural=this.state.town.find_rural;
            var town_label=this.state.town.label;
            label=town_label.split("，");
        }
        var html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body><div style="padding: 1px;">' +this.state.town.content+ '</div></body></html>';

        return (
        <View style={styles.container}>
            <View style={{width,height:64,backgroundColor:'#24CD78',flexDirection:'row',justifyContent:'space-between',paddingTop:20,alignItems:'center'}}>
                <TouchableOpacity activeOpacity={0.5}
                                  onPress={()=>this.BackAction()}>
                    <View style={{flexDirection:'row',width:40,height:40,marginLeft:10,alignItems:'center',}}>
                        <Image style={{width:17,height:17,resizeMode:'contain',marginLeft:3}}
                               source={require('../../Image/back_icon_white.png')}/>
                    </View>
                </TouchableOpacity>
                <Text style={{color:'white',fontSize:19}}>{this.state.town.name}</Text>
                <View style={{flexDirection:'row',width:40,height:40,marginRight:10,justifyContent:'flex-end',alignItems:'center'}}>
                </View>
            </View>
            {this.state.flag?
                <ScrollView >
                {town_list!=null&&town_list !=''?
                    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={{marginTop:10,width:width-10}}>
                        {town_list.map((item, index)=>{
                            return(
                                <TouchableOpacity  key={index} activeOpacity={0.5}
                                                   onPress={()=>this.goTown(item.id)}>
                                    <View
                                        style={{width:100,height:100,marginLeft:10}}>
                                        <Image  style={{width:100,height:100,resizeMode:'cover',borderRadius:4}}
                                                source={{uri:item.image}} />
                                        <View style={{position: 'absolute',left:0,bottom:0,width:100,height:25,justifyContent:'center',alignItems:'center',borderBottomLeftRadius:4,borderBottomRightRadius:4,backgroundColor:this.indexColor(index)}}>
                                            <Text style={{color:'white'}}>{item.name}</Text>
                                        </View>
                                    </View>
                                </TouchableOpacity>
                            )
                        })}
                    </ScrollView>:null}
                <View style={{width,height:60,justifyContent:'center'}}>
                    <Text style={{color:'black',fontWeight:'bold',fontSize:18,marginLeft:10}}>{this.state.town.name}</Text>
                </View>
                <View style={{width,height:110}}>
                    <View style={{position: 'absolute',left:10,top:20,width:width-20,backgroundColor:'#CEE1FA',borderTopRightRadius:4,borderTopLeftRadius:4}}>
                        <View style={{width:width-140,marginLeft:140,height:90}}>
                            <Text style={{color:'black',fontSize:15,fontWeight:'bold',marginTop:5,marginBottom:5}}>{this.state.town.name}</Text>
                            <RecommendedStar num={this.state.town.star}/>
                            {label!=null&&label!=''?
                                <View style={{flexDirection:'row',marginTop:5,width:width-160}}>
                                    {label.map((item, index) => {
                                        return (
                                            <View key={index} style={{flexDirection:'row'}}>
                                                <Image style={{width:12,height:15,resizeMode:'contain',marginRight:3,marginTop:2}}
                                                       source={this.labelIcon(index)}/>
                                                <Text>{item}</Text>
                                            </View>
                                        )
                                    })}
                                </View>:null}
                        </View>
                    </View>
                    <Image style={{width:120,height:100,resizeMode:'cover',marginLeft:20,borderRadius:4}}
                           source={{uri:this.state.town.image}}/>
                </View>
                <View style={{backgroundColor:'#CEE1FA',borderBottomLeftRadius:4,borderBottomRightRadius:4,marginLeft:10,width:width-20}}>
                    <TownWebView html={html} style={{backgroundColor:'rgba(0,0,0,0)',width:width-20}}/>
                </View>
                {find_rural!=null&&find_rural!=''?
                    <View style={{width,height:60,justifyContent:'center'}}>
                        <Text style={{color:'black',fontWeight:'bold',fontSize:15,marginLeft:10}}>发现村落</Text>
                    </View>:null}
                {find_rural!=null&&find_rural!=''?
                    <AutoResponsive {...this.getAutoResponsiveProps()}>
                        {this.renderChildren(find_rural)}
                    </AutoResponsive>
                    :null
                  }
            </ScrollView>
                :
                    <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                        style={{position: 'absolute',top:0,left:0,width:width,height:height-64,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                        <View
                            style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                            <ActivityIndicator
                                style={{ alignItems: 'center',justifyContent: 'center'}}
                                size="large"/>
                            <Text style={{color:'white'}}>加载中...</Text>
                        </View>
                    </View>
                </View>}
        </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor: 'white',
    },
});

